<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('客户池管理')"/>
    <style>

    </style>
</head>
<body class="hold-transition skin-black sidebar-mini">
<div class="wrapper">
    <th:block th:include="include :: navbar"/>
    <th:block th:include="include :: menu('customer')"/>
    <div class="content-wrapper">
        <section class="content-header">
            <h1>客户池管理</h1>
        </section>
        <section class="content">
            <div class="box">
                <!--高级查询--->
                <div style="margin: 10px;">
                    <form class="form-inline" id="searchForm" action="/customer/customerPool" method="post">
                        <input type="hidden" name="currentPage" id="currentPage" value="1">
                        <div class="form-group">
                            <label for="keyword">关键字:</label>
                            <input type="text" class="form-control" id="keyword" name="keyword" placeholder="请输入姓名或电话"
                                   th:field="${qo.keyword}">
                        </div>
                        <div class="form-group">
                            <label for="sellerId"> 市场专员:</label>
                            <select class="form-control" id="sellerId" name="sellerId">
                                <option value="">全部</option>
                                <option th:each="item:${sellers}" th:value="${item.id}" th:text="${item.name}"
                                        th:selected="${qo.sellerId eq item.id}"></option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span>
                            查询
                        </button>
                    </form>
                </div>
                <div class="box-body table-responsive ">
                    <table class="table table-hover table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>编号</th>
                            <th>名称</th>
                            <th>电话</th>
                            <th>qq</th>
                            <th>职业</th>
                            <th>来源</th>
                            <th>销售员</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="item:${pageInfo?.list}">
                            <td th:text="${(qo.currentPage-1)*qo.pageSize+(itemStat.index+1)}"></td>
                            <td th:text="${item.name}"></td>
                            <td th:text="${item.tel}"></td>
                            <td th:text="${item.qq}"></td>
                            <td th:text="${item?.job?.title}"></td>
                            <td th:text="${item?.source?.title}"></td>
                            <td th:text="${item?.seller?.name}"></td>
                            <td th:if="${item.status == 0}">流失</td>
                            <td th:if="${item.status == 1}">开发失败</td>
                            <td th:if="${item.status == 2}">潜在客户</td>
                            <td th:if="${item.status == 3}">正式客户</td>
                            <td th:if="${item.status == 4}">资源池客户</td>
                            <td>
                                <a href="#" class="btn btn-info btn-xs btn_attract" th:data-option="${item.toJson()}">
                                    <span class="glyphicon glyphicon-pencil"></span> 吸纳
                                </a>
                                <a href="#" class="btn btn-warning btn-xs btn_turnover" th:data-option = "${item.toJson()}">
                                    <span class="glyphicon glyphicon-pencil"></span> 移交
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <!--分页-->
                    <th:block th:include="include :: page"/>
                </div>
            </div>
        </section>
    </div>
</div>

<!--吸纳-->
<script>
    $(function () {
        // 打开吸纳模态窗口
        $(".btn_attract").click(function () {
            var data = $(this).data("option");
            $("#reason2").val("");
            if (data) {
                $("#customerId2").val(data.id);
                $("#oldSellerId2").val(data.seller.id);
            }
            $("#modal1").modal('show');
        });
    })
</script>
<!--吸纳客户的模态窗口-->
<div class="modal fade" tabindex="-1" role="dialog" id="modal1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">吸纳</h4>
            </div>
            <form action="/customer/absorb" method="post">
                <input type="hidden" name="id">
                <div class="modal-body">
                    <div class="form-group">
                        <input type="hidden" name="customerId" id="customerId2">
                        <input type="hidden" name="oldSellerId" id="oldSellerId2">
                        <label for="reason2">吸纳备注:</label>
                        <textarea type="text" class="form-control" name="reason" id="reason2" rows="8" cols="10"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!--btn_turnover-->
<!--移交-->
<script>
    $(function () {
        // 打开移交模态窗口
        $(".btn_turnover").click(function () {
            var data = $(this).data("option");
            $("#newSellerId").val("");
            $("#reason").val("");
            if (data) {
                $("#customerName").val(data.name);
                $("#customerId").val(data.id);
                $("#oldSellerId").val(data.seller.id);
                $("#oldSeller").val(data.seller.name);
            }
            $("#modal4").modal('show');
        });
    })
</script>
<!--移交客户的模态窗口-->
<div class="modal fade" tabindex="-1" role="dialog" id="modal4">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">移交</h4>
            </div>
            <form action="/customer/poolTransfer" method="post">
                <input type="hidden" name="id">
                <div class="modal-body">
                    <div class="form-group">
                        <input type="hidden" name="customerId" id="customerId">
                        <label for="customerName">客户姓名:</label>
                        <input type="text" class="form-control" name="customerName" id="customerName" disabled>
                    </div>
                    <div class="form-group">
                        <input type="hidden" name="oldSellerId" id="oldSellerId">
                        <label for="oldSeller">旧营销人员:</label>
                        <input type="text" class="form-control" name="oldSeller" id="oldSeller" disabled>
                    </div>
                    <div class="form-group">
                        <label for="newSellerId">新营销人员:</label>
                        <select class="form-control" id="newSellerId" name="newSellerId">
                            <option value="">请选择</option>
                            <option th:each="item:${employees}" th:value="${item.id}" th:text="${item.name}"></option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="reason">移交原因:</label>
                        <textarea type="text" class="form-control" name="reason" id="reason"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<th:block th:include="include :: footer"/>
</body>
</html>
